<template>
  <div class="body-selector">
    <div class="part-list">
      <div class="part-list-header">
        <h3>身体部位</h3>
        <p class="subtitle">请选择要查看的部位</p>
      </div>

      <div v-if="loading" class="loading-state">
        加载中...
      </div>
      <div
          v-else
          v-for="part in bodyParts"
          :key="part.id"
          class="part-item"
          :class="{ active: selectedPart === part.id }"
          @click="selectPart(part.id)"
      >
        <div class="part-icon">
          <i :class="getIconForPart(part.bodyName)"></i>
        </div>
        <div class="part-info">
          <span class="part-name">{{ part.bodyName }}</span>
          <span class="part-description" v-if="selectedPart === part.id">{{ part.description }}</span>
        </div>
      </div>
    </div>

    <div class="body-display">
      <div class="human-outline">
        <div class="body-base"></div>
        <!-- 动态渲染身体部位 -->
        <template v-for="part in bodyParts" :key="part.id">
          <!-- 普通部位 -->
          <template v-if="!['手臂', '腿部'].includes(part.bodyName)">
            <div 
              :class="[
                'part-highlight',
                getPartClass(part.bodyName),
                { active: selectedPart === part.id }
              ]"
              @click="selectPart(part.id)"
            ></div>
          </template>
          
          <!-- 手臂部位 -->
          <template v-if="part.bodyName === '手臂'">
            <div 
              :class="[
                'part-highlight',
                'arms',
                'left',
                { active: selectedPart === part.id }
              ]"
              @click="selectPart(part.id)"
            ></div>
            <div 
              :class="[
                'part-highlight',
                'arms',
                'right',
                { active: selectedPart === part.id }
              ]"
              @click="selectPart(part.id)"
            ></div>
          </template>

          <!-- 腿部 -->
          <template v-if="part.bodyName === '腿部'">
            <div 
              :class="[
                'part-highlight',
                'legs',
                'left',
                { active: selectedPart === part.id }
              ]"
              @click="selectPart(part.id)"
            ></div>
            <div 
              :class="[
                'part-highlight',
                'legs',
                'right',
                { active: selectedPart === part.id }
              ]"
              @click="selectPart(part.id)"
            ></div>
          </template>
        </template>

        <div v-if="selectedPart" class="part-label">
          {{ getSelectedPart?.bodyName }}
        </div>
      </div>
    </div>

    <div class="control-panel">
      <div class="part-detail" v-if="selectedPart">
        <h3>{{ getSelectedPart?.bodyName }}</h3>
        <p>{{ getSelectedPart?.description }}</p>
      </div>
      <button class="submit-button" @click="handleSubmit" :disabled="!selectedPart">
        确认选择
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { selectBodyAll } from "@/api/body/body.js";
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const bodyParts = ref([])
const selectedPart = ref(null)
const loading = ref(false)

const getSelectedPart = computed(() =>
    selectedPart.value ? bodyParts.value.find(p => p.id === selectedPart.value) : null
)

const selectPart = (partId) => {
  selectedPart.value = partId
}

// 获取部位对应的 class
const getPartClass = (bodyName) => {
  const classMap = {
    '头部': 'head',
    '胸部': 'chest',
    '腹部': 'abdomen',
    '腰部': 'waist'
  }
  return classMap[bodyName] || ''
}

const handleSubmit = () => {
  if (selectedPart.value) {
    const selectedBodyName = getSelectedPart.value.bodyName
    ElMessage.success(`已选择：${selectedBodyName}`)
    // 跳转到 /netty/im 页面并传递参数
    router.push({
      path: '/ai/ai',
      query: {
        bodyName: selectedBodyName
      }
    })
  }
}

// 图标映射
const getIconForPart = (name) => ({
  '头部': 'fas fa-head',
  '胸部': 'fas fa-lungs',
  '腹部': 'fas fa-stomach',
  '手臂': 'fas fa-hand',
  '腰部': 'fas fa-circle',
  '腿部': 'fas fa-shoe-prints'
})[name]

// 颜色映射
const getColorForPart = (name) => ({
  '头部': '#2196F3',
  '胸部': '#F44336',
  '腹部': '#FF9800',
  '手臂': '#4CAF50',
  '腰部': '#9C27B0',
  '腿部': '#795548'
})[name]

// 获取并处理身体部位数据
const fetchBodyParts = async () => {
  try {
    loading.value = true
    const res = await selectBodyAll()
    bodyParts.value = res.data
  } finally {
    loading.value = false
  }
}

onMounted(fetchBodyParts)
</script>

<style scoped lang="scss">
.body-selector {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  gap: 30px;
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 700px;
  background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.part-list {
  background: rgba(255, 255, 255, 0.9);
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.part-list-header {
  margin-bottom: 20px;
  
  h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 8px;
  }

  .subtitle {
    color: #7f8c8d;
    font-size: 0.95rem;
  }
}

.part-item {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.7);

  &:hover {
    background-color: #fff;
    border-color: rgba(33, 150, 243, 0.1);
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }

  &.active {
    background-color: #fff;
    border-color: var(--organ-color, #2196F3);
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.15);

    .part-icon {
      color: var(--organ-color, #2196F3);
      transform: scale(1.1);
    }
  }
}

.part-icon {
  width: 40px;
  height: 40px;
  margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  color: #7f8c8d;
  transition: all 0.3s ease;
  background: rgba(33, 150, 243, 0.05);
  border-radius: 10px;
}

.part-info {
  flex: 1;
}

.part-name {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #2c3e50;
  font-size: 1.1rem;
}

.part-description {
  display: block;
  font-size: 0.9rem;
  color: #7f8c8d;
  line-height: 1.5;
}

.body-display {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.human-outline {
  width: 300px;
  height: 600px;
  position: relative;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.body-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  opacity: 0.8;
  border-radius: 16px;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 100px;
    background: inherit;
    border-radius: 40px 40px 35px 35px;
    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.05);
  }

  &::after {
    content: '';
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 480px;
    background: inherit;
    border-radius: 0 0 30px 30px;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.05);
  }
}

.part-highlight {
  position: absolute;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  border-radius: 8px;

  &:hover {
    background-color: rgba(33, 150, 243, 0.15);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.2);
  }

  &.active {
    z-index: 10;
    background-color: rgba(33, 150, 243, 0.25);
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.3);

    &::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      border: 2px solid rgba(33, 150, 243, 0.5);
      border-radius: inherit;
      animation: pulse 2s infinite;
    }
  }
}

.part-label {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  color: #2c3e50;
  font-weight: 500;
  border: 1px solid rgba(33, 150, 243, 0.1);
}

// 身体部位样式
.head {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 100px;
  border-radius: 40px 40px 35px 35px;
  background-color: rgba(33, 150, 243, 0.1);
}

.chest {
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 120px;
  background-color: rgba(244, 67, 54, 0.1);
}

.abdomen {
  top: 220px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 100px;
  background-color: rgba(255, 152, 0, 0.1);
}

.waist {
  top: 320px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 60px;
  background-color: rgba(156, 39, 176, 0.1);
}

.arms {
  width: 40px;
  height: 160px;
  background-color: rgba(76, 175, 80, 0.1);

  &.left {
    top: 120px;
    left: 40px;
    transform: rotate(10deg);
  }

  &.right {
    top: 120px;
    right: 40px;
    transform: rotate(-10deg);
  }
}

.legs {
  width: 50px;
  height: 200px;
  background-color: rgba(121, 85, 72, 0.1);

  &.left {
    top: 380px;
    left: calc(50% - 55px);
    transform: rotate(5deg);
  }

  &.right {
    top: 380px;
    right: calc(50% - 55px);
    transform: rotate(-5deg);
  }
}

// 激活状态的颜色
.head.active { background-color: rgba(33, 150, 243, 0.4); }
.chest.active { background-color: rgba(244, 67, 54, 0.4); }
.abdomen.active { background-color: rgba(255, 152, 0, 0.4); }
.arms.active { background-color: rgba(76, 175, 80, 0.4); }
.waist.active { background-color: rgba(156, 39, 176, 0.4); }
.legs.active { background-color: rgba(121, 85, 72, 0.4); }

.control-panel {
  background: rgba(255, 255, 255, 0.9);
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.part-detail {
  margin-bottom: 20px;

  h3 {
    color: #2c3e50;
    font-size: 1.3rem;
    margin-bottom: 12px;
  }

  p {
    color: #7f8c8d;
    line-height: 1.6;
    font-size: 0.95rem;
  }
}

.submit-button {
  width: 100%;
  padding: 16px 30px;
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);

  &:hover:not(:disabled) {
    background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(33, 150, 243, 0.3);
  }

  &:disabled {
    background: linear-gradient(135deg, #b0bec5 0%, #90a4ae 100%);
    cursor: not-allowed;
    box-shadow: none;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.loading-state {
  padding: 30px;
  text-align: center;
  color: #7f8c8d;
  font-size: 0.95rem;
}
</style>